<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title></title>
    <link rel="stylesheet" th:href="@{/asserts/bootstrap4/css/bootstrap.css}">
    <link rel="stylesheet" th:href="@{/asserts/css/QuestionForm.css}">
</head>
<body>
<div class="container">
    <div class="questionForm">
        <div class="formTitle">
        </div>
        <div class="formDate">
            <div class="oneDate">
                <img th:src="@{/asserts/img/startTime.png}" class="oneDate_img">
                <span>开始时间:</span>
                <div class="dateTime" id="starttime"></div>
            </div>
            <div class="oneDate">
                <img th:src="@{/asserts/img/finishTime.png}" class="oneDate_img">
                <span>截至时间:</span>
                <div class="dateTime" id="finishtime"></div>
            </div>
            <div class="clear"></div>
        </div>
        <div class="person_msg">
            <div class="message">
                <span>学号:</span>
                <input type="text" class="form-control message_input" id="username" autocomplete="off">
            </div>
            <div class="message">
                <span>密码:</span>
                <input type="text" class="form-control message_input" id="password" autocomplete="off">
            </div>
        </div>
        <hr/>
        <div class="content">

        </div>
        <div class="btnArea">
            <button class="btn btn-dark" id="submit">提交</button>
        </div>

        <!--题目模板-->
        <div class="content_model">
            <div class="Component oneChoose">
                <div class="num_title">
                    <span class="com_num"></span>
                    <span class="com_title"></span>
                    <span class="com_type">(单选题)</span>
                </div>
                <div class="com_options">
                    <div class="clear"></div>
                </div>
            </div>

            <div class="Component moreChoose">
                <div class="num_title">
                    <span class="com_num"></span>
                    <span class="com_title"></span>
                    <span class="com_type">(多选题)</span>
                </div>
                <div class="com_options">
                    <div class="clear"></div>
                </div>
            </div>

            <div class="Component oneLineText">
                <div class="num_title">
                    <span class="com_num"></span>
                    <span class="com_title"></span>
                    <span class="com_type">(单行)</span>
                </div>
                <div class="com_content">
                    <input type="text" class="form-control oneLine-control">
                </div>
            </div>

            <div class="Component moreLineText">
                <div class="num_title">
                    <span class="com_num"></span>
                    <span class="com_title"></span>
                    <span class="com_type">(多行)</span>
                </div>
                <div class="com_content">
                    <textarea rows="3" class="form-control moreLine-control"></textarea>
                </div>
            </div>

            <div class="Component recommendPerson">
                <div class="num_title">
                    <span class="com_num"></span>
                    <span class="com_title"></span>
                    <span class="com_type">(推荐人员)</span>
                </div>
                <div class="com_content">
                    <input type="text" class="form-control recommendPerson-control" placeholder="姓名" />
                </div>
            </div>

            <div class="oneOption oneChoose_option">
                <span class="option_num">A、</span>
                <span class="option_text">选项A</span>
            </div>

            <div class="oneOption moreChoose_option">
                <span class="option_num">A、</span>
                <span class="option_text">选项A</span>
            </div>

        </div>
    </div>
</div>
</body>
<script th:src="@{/asserts/js/jquery-3.3.1.min.js}"></script>
<script th:src="@{/asserts/js/popper.min.js}"></script>
<script th:src="@{/asserts/bootstrap4/js/bootstrap.js}"></script>
<script th:src="@{/asserts/js/canvas-nest.min.js}"></script>
<script type="text/javascript" th:inline="javascript">
    // 渲染部分
    $(function () {
        var option_code = ["A.","B.","C.","D.","E.","F.","G.","H.","I.","J.","K.","L.","M.","N.","O.","P.","Q.","R.","S.","T.",
            "U.","V.","W.","X.","Y.","Z."];
        var questionForm = [[${data}]];
        var id =questionForm.id;
        var title = questionForm.title;
        var starttime = questionForm.starttime;
        var finishtime = questionForm.finishtime;
        var content = questionForm.content;
        $("title").text(title);
        $(".formTitle").text(title);
        $("#starttime").text(starttime);
        $("#finishtime").text(finishtime);
        for (var i = 0;i < content.length;i ++){
            var type = content[i].type;
            var title_com = content[i].title;
            switch (type) {
                case "oneChoose":
                    var component = $(".content_model").children(".oneChoose").clone(true);
                    component.find(".com_num").text((i+1)+"、");
                    component.find(".com_title").text(title_com);
                    var options = content[i].options;
                    var clear = component.find(".clear");
                    for (var j = 0;j < options.length;j ++){
                        var option = $(".content_model").children(".oneChoose_option").clone(true);
                        option.children(".option_num").text(option_code[j]);
                        option.children(".option_text").text(options[j]);
                        $(clear).before(option);
                    }
                    break;
                case "moreChoose":
                    var component = $(".content_model").children(".moreChoose").clone(true);
                    component.find(".com_num").text((i+1)+"、");
                    component.find(".com_title").text(title_com);
                    var options = content[i].options;
                    var clear = component.find(".clear");
                    for (var j = 0;j < options.length;j ++){
                        var option = $(".content_model").children(".moreChoose_option").clone(true);
                        option.children(".option_num").text(option_code[j]);
                        option.children(".option_text").text(options[j]);
                        $(clear).before(option);
                    }
                    break;
                case "oneLineText":
                    var component = $(".content_model").children(".oneLineText").clone(true);
                    component.find(".com_num").text((i+1)+"、");
                    component.find(".com_title").text(title_com);
                    break;
                case "moreLineText":
                    var component = $(".content_model").children(".moreLineText").clone(true);
                    component.find(".com_num").text((i+1)+"、");
                    component.find(".com_title").text(title_com);
                    break;
                case "recommendPerson":
                    var component = $(".content_model").children(".recommendPerson").clone(true);
                    component.find(".com_num").text((i+1)+"、");
                    component.find(".com_title").text(title_com);
                    break;
            }
            $(".content").append(component);
        }
    });

    //控制选项部分
    $(".oneOption").click(function () {
        var type = $(this).parents(".Component").attr("class");
        if (type === "Component oneChoose") {
            var options = $(this).parent().children(".oneOption");
            for (var i = 0;i < options.length;i ++){
                $(options[i]).attr("class","oneOption oneChoose_option");
            }
            $(this).attr("class","oneOption oneChoose_option option_click");
        } else if (type === "Component moreChoose"){
            var ischoose = $(this).attr("class");
            if (ischoose === "oneOption moreChoose_option option_click") {
                $(this).attr("class","oneOption moreChoose_option")
            }else{
                $(this).attr("class","oneOption moreChoose_option option_click")
            }
        }
    });
</script>
</html>